<template>
  <div style="margin: 5px;">
    <czr-return-previous>
      <el-icon size="1.3em" @click="deleteArticle(articleData.id)"><Delete /></el-icon>
    </czr-return-previous>
  </div>
  <div class="box">
    <h1 class="title">
        <span style="font-size: .8em;">
       {{ articleData.title }}
      </span>
    </h1>
    <div style=" display: flex;">
      <el-icon size="small">
        <Clock/>
      </el-icon>
      <el-text tag="p" size="small" style="    margin-left: .4em;">{{ formattedUpdateTime }}</el-text>
    </div>

<!--    <div style="display: flex;    margin-top: 10px;">-->
<!--      <el-text tag="p" style="font-size: 1em;margin-top: 0.4em;margin-left: 0.8em;">{{ userName }}</el-text>-->
<!--    </div>-->

    <hr style="    margin-bottom: 1.3em;">
    <el-text class="mx-1" size="large" style="color: #222226">{{ articleData.content }}</el-text>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import {deleteArticleById, getArticlesOne} from "@/http/article";
import {useRoute,useRouter} from "vue-router";
import {Clock,Delete} from "@element-plus/icons-vue"
import {ElMessage, ElMessageBox} from "element-plus";

const route = useRoute()
const router = useRouter()
let articleData = ref({})

onMounted(() => {
  const {id} = route.params;
  loadData(id)
})

function loadData(id) {
  getArticlesOne(id).then(res => {
    articleData.value = res.data.article;
    console.log(articleData)
  })

}
const deleteArticle=(id)=>{
  ElMessageBox.confirm(
      '',
      '你确定要删除吗',
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        center: true,
      }
  )
      .then(() => {
        deleteArticleById(id).then(res=>{
          if (res.success){
            router.back();
            ElMessage({type: 'success',message: '删除成功',})
          }
        })
      })

}
const formattedUpdateTime = computed(() => {
  return formatDate(articleData.value.updateTime);
});
const formatDate = (value) => {
  const dt = new Date(value);
  let year = dt.getFullYear();
  let month = (dt.getMonth() + 1).toString().padStart(2, '0');
  let date = dt.getDate().toString().padStart(2, '0');
  let hour = dt.getHours().toString().padStart(2, '0');
  let minute = dt.getMinutes().toString().padStart(2, '0');
  let second = dt.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
}
</script>

<style scoped>
.box {
  margin: 1em;
}

h1, span, div {
  font-weight: normal;
}

.title {
  font-size: 1.7em;
  margin-bottom: 0.5em;
  line-height: 1.1em;
}
</style>